<template>
  <div class="components-container">
    <div style="margin-bottom: 12px;">
      滚动率分析-账户滚动率
    </div>
    <div class="filter-container">
      <el-date-picker
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"
        style="width: 360px;"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="tableQuery.gender"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in gender"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.channel"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in channel"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.customer_group"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in customer_group"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.credit"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in age"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.risk"
        clearable
        placeholder="风险等级"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in risk"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="left">
        <el-table-column
          prop="create_time"
          label="月份I"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="月份I+1" align="left">
        <el-table-column
          label="正常"
          prop="channel"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期1期"
          prop="customer_group"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期2期"
          prop="age"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期3期"
          prop="education"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期4期"
          prop="gender"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期5期"
          prop="credit"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期6期"
          prop="risk"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期6期以上"
          prop="normal_repayment"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
    <div
      style="margin: 12px 0;border-top: 1px solid #8080804f;padding-top: 12px;"
    >
      滚动率分析-逾期金额滚动率
    </div>
    <div class="filter-container">
      <el-date-picker
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"
        style="width: 360px;"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="tableQuery.gender"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in gender"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.channel"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in channel"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.customer_group"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in customer_group"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.credit"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in credit"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.risk"
        clearable
        placeholder="风险等级"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in risk"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="" align="left">
        <el-table-column
          label="月份I"
          prop="create_time"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="月份I+1" align="left">
        <el-table-column
          label="正常"
          prop="channel"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期1期"
          prop="customer_group"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期2期"
          prop="age"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期3期"
          prop="education"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期4期"
          prop="gender"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期5期"
          prop="credit"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期6期"
          prop="risk"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾期6期以上"
          prop="normal_repayment"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const defaultPage = {
  limit: 10,
  current_page: 1
}
const defaultQuery = {
  name: '',
  call_type: ''
}
const defaultCreateQuery = {
  name: '',
  desc: '',
  data_table: '',
  call_type: '',
  is_retry: false
}
// import s from './compoment/search'
export default {
  components: {},
  data() {
    return {
      status: 'month',
      tableQuery: Object.assign({}, defaultQuery, defaultPage),
      total: null,
      gender: [
        {
          type: 1,
          name: '住房贷款'
        },
        {
          type: 2,
          name: '汽车贷款'
        }
      ],
      channel: [
        {
          type: 1,
          name: 'A'
        },
        {
          type: 2,
          name: 'B'
        }
      ],
      customer_group: [
        {
          type: 1,
          name: '新客'
        },
        {
          type: 2,
          name: '老客'
        }
      ],
      age: [
        {
          type: 1,
          name: '贷前反欺诈1.0'
        },
        {
          type: 2,
          name: '贷前反欺诈1.1'
        },
        {
          type: 3,
          name: '贷前反欺诈1.2'
        },
        {
          type: 4,
          name: '手机银行反欺诈1.0'
        },
        {
          type: 5,
          name: '手机银行反欺诈1.1'
        }
      ],
      education: [
        {
          type: 1,
          name: '无学历'
        },
        {
          type: 2,
          name: '小学'
        },
        {
          type: 3,
          name: '初中'
        },
        {
          type: 4,
          name: '高中'
        },
        {
          type: 5,
          name: '本科'
        },
        {
          type: 6,
          name: '硕士'
        },
        {
          type: 7,
          name: '博士'
        },
        {
          type: 8,
          name: '其它'
        }
      ],
      credit: [
        {
          type: 1,
          name: '400以内'
        },
        {
          type: 2,
          name: '401～500'
        },
        {
          type: 3,
          name: '501～600'
        },
        {
          type: 4,
          name: '601～700'
        },
        {
          type: 5,
          name: '701～800'
        },
        {
          type: 6,
          name: '801～900'
        },
        {
          type: 7,
          name: '901+'
        }
      ],
      risk: [
        {
          type: 1,
          name: 'A'
        },
        {
          type: 2,
          name: 'B'
        },
        {
          type: 3,
          name: 'C'
        },
        {
          type: 4,
          name: 'D'
        },
        {
          type: 5,
          name: 'E'
        }
      ],
      day_interval: [
        {
          type: 1,
          name: '0'
        },
        {
          type: 2,
          name: '1'
        }
      ],
      num: 783000,
      success: 500000,
      fail_num: 283000,
      suc: '80%',
      fail: '20%',
      titlealert: '',
      tableData: [
        {
          create_time: '正常',
          channel: '93.7%',
          customer_group: '6.3%',
          age: '',
          education: '',
          gender: '',
          credit: '',
          risk: '',
          normal_repayment: ''
        },
        {
          create_time: '逾期1期',
          channel: '57.0%',
          customer_group: '36.8%',
          age: '6.2%',
          education: '',
          gender: '',
          credit: '',
          risk: '',
          normal_repayment: ''
        },
        {
          create_time: '逾期2期',
          channel: '20.5%',
          customer_group: '28.1%',
          age: '21.1%',
          education: '30.4%',
          gender: '',
          credit: '',
          risk: '',
          normal_repayment: ''
        },
        {
          create_time: '逾期3期',
          channel: '12.6%',
          customer_group: '16.8%',
          age: '12.1%',
          education: '18.0%',
          gender: '40.4%',
          credit: '',
          risk: '',
          normal_repayment: ''
        },
        {
          create_time: '逾期4期',
          channel: '9.0%',
          customer_group: '9.7%',
          age: '6.4%',
          education: '10.5%',
          gender: '15.2%',
          credit: '49.3%',
          risk: '',
          normal_repayment: ''
        },
        {
          create_time: '逾期5期',
          channel: '7.7%',
          customer_group: '7.7%',
          age: '4.0%',
          education: '6.1%',
          gender: '8.8%',
          credit: '16.2%',
          risk: '49.4%',
          normal_repayment: ''
        },
        {
          create_time: '逾期6期',
          channel: '6.7%',
          customer_group: '5.9%',
          age: '2.7%',
          education: '3.1%',
          gender: '4.9%',
          credit: '9.7%',
          risk: '15.9%',
          normal_repayment: '51.2%'
        },
        {
          create_time: '逾期6期以上',
          channel: '4.3%',
          customer_group: '2.5%',
          age: '0.6%',
          education: '0.7%',
          gender: '0.8%',
          credit: '1.3%',
          risk: '2.3%',
          normal_repayment: '87.6%'
        }
      ],
      tableLoading: true,

      createdItem: Object.assign({}, defaultCreateQuery),
      actionType: 'add',
      formVisible: false,
      formSubmiting: false
    }
  },
  created: function() {
    // console.log(this.search)
  },
  computed: {},
  mounted() {},
  methods: {
    handleFilter() {
      this.tableQuery.current_page = 1
      this.getList()
    },
    handleReset() {
      this.tableQuery = Object.assign({}, defaultQuery)
      this.getList()
    },
    handleSizeChange(val) {
      this.tableQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.tableQuery.current_page = val
      this.getList()
    },
    downloand() {
      console.log('下载')
    }
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
